<template>
  <header id="Header">
    <div class="returns" @click="$router.go(-1)">
      <svg
        t="1557238130539"
        class="icon"
        style
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1972"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="200"
        height="200"
      >
        <path
          d="M700.370852 20.895871C721.131646 0.016373 754.876124-0.071631 775.756645 20.689163c20.879498 20.761818 20.966479 54.520622 0.205685 75.385794L323.634265 549.597218c-20.761818 20.879498-54.513459 20.968525-75.39398 0.205684-20.871312-20.760795-20.967502-54.519599-0.205685-75.399097L700.370852 20.895871z"
          fill="#ffffff"
          p-id="1973"
        ></path>
        <path
          d="M775.96233 927.910717c20.760795 20.878475 20.673814 54.638302-0.205685 75.399096-20.880521 20.762841-54.624999 20.673814-75.385793-0.204661l-452.337275-453.507934c-20.761818-20.878475-20.665627-54.638302 0.205684-75.40012 20.880521-20.761818 54.632162-20.659488 75.39398 0.206707l452.329089 453.506912z"
          fill="#ffffff"
          p-id="1974"
        ></path>
      </svg>
    </div>
    <div class="title" :style="!moreUrl ? 'margin-left:-1.2rem;': null" v-if="title">{{title}}</div>
    <div class="moreUrl" v-if="moreUrl" @click="$emit('click')">
      <img :src="moreUrl" alt>
    </div>
  </header>
</template>

<script>
export default {
  name: "Headers",
  props: {
    title: {
      type: String,
      default: ""
    },
    moreUrl: {
      type: String,
      default: ""
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../utils/styl/mixin.styl'
#Header
  position fixed
  top rem(22)
  left 0
  width 100%
  display flex
  justify-content space-between
  height rem(50)
  z-index 9
  .returns, .moreUrl
    position relative
    z-index 1
    width rem(20)
    height rem(20)
    padding rem(15)
    svg, img
      width 100%
      height 100%
      object-fit contain
  .title
    flex 1
    font-size rem(18)
    line-height rem(50)
    color #fff
</style>
